<template>
  <el-form-item :rules="item.rule" :label="item.label" :prop="item.prop">
    <el-select
      @visible-change="fixEdgeSelect"
      v-model="formData[item.prop]"
      @change="item.change && item.change(formData[item.prop], item.prop)"
      :disabled="item.disabled"
      :placeholder="
        item.placeholder === undefined ? '请选择' : item.placeholder
      "
      :clearable="item.clearable === undefined ? true : item.clearable"
      :filterable="item.filterable"
      :remote="item.remote"
      :remote-method="remoteMethod"
      :loading="loading"
      class="input-with-select"
      :multiple="item.multiple === undefined ? false : item.multiple"
      popper-class="wn-selectCom-box"
    >
      <el-option v-if="item.showAll" label="全部" value="-1"></el-option>
      <el-option
        :label="child.label"
        :value="child.code"
        :key="child.code"
        v-for="child in item.children"
        :disabled="child.disabled"
      ></el-option>
    </el-select>
  </el-form-item>
</template>

<script>
export default {
  name: "selectCom",
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      loading: false
    };
  },

  computed: {
    maxInputLength() {
      return this.item.max ? this.item.max : "";
    }
  },
  methods: {
    fixEdgeSelect(isVisible) {
      Utils.Tools.fixEdgeSelect(isVisible);
      // 解决关联poporver组件不关闭问题
      var self = this;
      let allrefs = self.$parent.$parent.$refs;
      for (let key in allrefs) {
        if (key.indexOf("selectCustomizeCom") !== -1) {
          allrefs[key][0].$refs.modal.doClose();
        }
      }
    },
    async remoteMethod(text) {
      if (this.item.remoteMethod) {
        this.loading = true;
        await this.item.remoteMethod(this.item, text);
        this.loading = false;
      }
    }
  },
  async mounted() {
    if (this.item.remoteMethod) {
      let input = this.$refs.elSelect.$el.querySelector(".el-input__inner");
      input.setAttribute("maxlength", this.maxInputLength);
      await this.item.remoteMethod(this.item);
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-scrollbar {
  height: 212px;
}

::v-deep .is-vertical {
  right: 0;
  width: 6px;
  left: unset;
}

::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
